<template>
    <div>
        <div class="text-12px pl-35px py-11px lh-12px" style="border-top: 1px solid #2f2f2f">
            我发表的讨论
            <span class="text-9px text-#cecece ml-3px">帖子数量：533</span>
        </div>
        <div class="bg-#6a6a6a relative">
            <nut-tabs v-model="active" color="#e222ff" align="left" size="small">
                <nut-tab-pane v-for="(tab, index) in tabs" :key="index" :title="tab.title" :pane-key="tab.id">
                    <div class="space-y-10px mt-10px mb-20px">
                        <div v-for="item in 5" class="part-wrap">
                            <div class="part" :style="{
                                height: isUnfold_discuss
                                    ? 'fit-content'
                                    : '280px',
                            }">
                                <div class="item-top">
                                    <div class="top">
                                        <div></div>
                                        <div>
                                            <div class="comment">
                                                <img src="@pages/game-detail/images/comment.webp" alt="">
                                                <span>3,383</span>
                                            </div>
                                            <div class="praise">
                                                <img src="@pages/game-detail/images/praise-white.webp" alt="">
                                                <span>12k</span>
                                            </div>
                                            <div class="praise">
                                                <span>回复</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item-content">
                                        <div class="left">
                                            <div>
                                                <img src="@pages/game-detail/images/avatar.webp" alt="">
                                                <div>
                                                    <div>黄油小郎君</div>
                                                    <div class="tag">
                                                        · 已注册188天
                                                    </div>
                                                    <div class="tag">
                                                        · 已玩游戏78
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <nut-button>
                                                    #平台指南
                                                </nut-button>
                                                <nut-button>
                                                    #LUST GODDESS
                                                </nut-button>
                                            </div>
                                        </div>
                                        <div class="right">
                                            <div class="con">
                                                看在色色女角的份上還是繼續玩了，官方請快開發一個安卓手機也能玩
                                                STEAMI的APP吧！
                                                <br>
                                                ----------
                                                <br>
                                                花了6USD買了角色跟寶箱增加，但發現要通關新任務條件要花相當多錢去儲值才能通關任務，這對於小課金的玩家相當不友善，你不花錢就永遠卡在20級聯盟左右，而且勝場只有30點敗場就扣60點的設計也相當差。
                                                看在色色女角的份上還是繼續玩了，官方請快開發一個安卓手機也能玩
                                                STEAMI的APP吧！ -----
                                            </div>
                                            <div class="pic-list">
                                                <img v-for="item in 10" :key="item"
                                                     src="@pages/game-detail/images/game-con.webp" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-for="item in 5" :key="item" class="item">
                                    <div style="width: 100px; flex-shrink: 0"></div>
                                    <div class="right">
                                        <div class="top">
                                            <div>
                                                <img src="@pages/game-detail/images/avatar.webp" alt=""
                                                     class="translate-y-[-5px]">
                                                <div class="flex flex-col">
                                                    <span class="text-12px lh-14px mb-3px">黄油小郎君</span>
                                                    <span class="text-8px lh-12px text-#a4a4a4">· 已注册188天</span>
                                                    <span class="text-8px lh-12px text-#a4a4a4">· 已玩游戏78</span>
                                                </div>
                                            </div>
                                            <div class="flex gap-5px">
                                                <div class="flex items-center gap-3px">
                                                    <img src="@pages/game-detail/images/comment.webp" alt=""
                                                         class="!w-10px translate-y-1px">
                                                    <span class="text-10px">3,383</span>
                                                </div>
                                                <div class="praise">
                                                    <img src="@pages/game-detail/images/praise-white.webp" alt="">
                                                    <span>12k</span>
                                                </div>
                                                <div class="praise">
                                                    <span>回复</span>
                                                </div>
                                                <div class="praise">
                                                    <span>关注此人</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="con">
                                            <div>
                                                ※引述《黄油小郎君》之銘言看在色色女角的份上還是續玩了，官方請快開發一個安卓手機也能玩STEAM的APP吧！
                                            </div>
                                            <div>
                                                花了6USD買了角色跟寶箱增加，但發現要通關新任務條件要花相當多錢去儲值才能通關任務，這對於小課金的玩家相當不友善。
                                            </div>
                                        </div>
                                        <div class="pic-list">
                                            <img v-for="item in 10" :key="item"
                                                 src="@pages/game-detail/images/game-con.webp" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="read-more" @click="isUnfold_discuss = !isUnfold_discuss">
                                <span>{{
                                    isUnfold_discuss ? "收起帖子" : "展开帖子"
                                }}</span>
                                <div class="triangle" :class="isUnfold_discuss && 'rotate-180deg'"></div>
                            </div>
                        </div>
                    </div>
                </nut-tab-pane>
            </nut-tabs>
            <div class="text-12px text-#fff absolute top-10px right-15px flex items-center">
                新到旧排序
                <triangle-down class="ml-3px" color="#fff" width="12px"></triangle-down>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { TriangleDown } from '@nutui/icons-vue'
import { ref, watch } from 'vue'
import { axiosService } from '@/http/sever'
import { showNotify } from '@nutui/nutui'
const tabs = [
    { id: 0, title: '全部' },
    { id: 1, title: '一天前' },
    { id: 2, title: '三天前' },
    { id: 3, title: '一周前' }
]
const active = ref('0')
watch(active, () => {
    getDiscussList()
})
const discussList = ref([])
const isUnfold_discuss = ref(false) // 是否展开

const getDiscussList = async () => {
    try {
        const data = {
            page: 1
        }
        if(active.value !== '0') {
            data.status = active.value
        }
        const res = await axiosService.post('/api/User/myTopic', data)
        console.log('讨论列表 -->', res)
    } catch (error) {
        showNotify.danger(error.msg)
    }
}
getDiscussList()
</script>

<style scoped>
:deep(.nut-tabs) {
    .nut-tab-pane {
        padding: 0;
        background: transparent;
    }
}

:deep(.nut-tabs__titles) {
    background: transparent;

    .nut-tabs__titles-item {
        min-width: 70px !important;
    }

    /* overflow: hidden; */
}

:deep(.nut-tabs__titles-item__line) {
    max-width: 40px !important;
}

.part-wrap {
    margin: 0 15px;
    border: solid 1px #6d6d6d;
    border-radius: 5px;
    background: #3c3c3c;

    .part {
        padding: 10px;
        overflow: hidden;

        .item-top {
            padding-bottom: 10px;
            border-bottom: solid 1px #595959;

            .top {
                display: flex;
                align-items: center;
                justify-content: space-between;

                &>div:last-child {
                    display: flex;
                    align-items: center;
                    font-size: 12px;
                    gap: 5px;
                    margin-bottom: 5px;

                    img {
                        width: 12px;
                    }

                    .praise,
                    .comment {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 10px;
                        line-height: 10px;
                    }

                    .praise {
                        background: #eb49a8;
                        border-radius: 99px;
                        padding: 7px 8px 5px;
                    }

                    .comment {
                        margin-right: 5px;

                        img {
                            transform: translateY(1px);
                        }
                    }
                }
            }

            .item-content {
                display: flex;
                align-items: start;
                justify-content: space-between;
                gap: 5px;

                .left {
                    flex-shrink: 0;
                    width: 100px;

                    &>div:first-child {
                        display: flex;
                        align-items: start;
                        gap: 5px;

                        img {
                            width: 30px;
                        }

                        &>div {
                            font-size: 12px;

                            .tag {
                                font-size: 8px;
                                color: #a4a4a4;
                                line-height: 14px;
                            }
                        }
                    }

                    &>div:last-child {
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: 10px;
                        margin-top: 20px;

                        .nut-button {
                            background: #339ede;
                            border: none;
                            color: #fff;
                            height: 18px;
                            font-size: 8px !important;
                            padding: 0 5px;
                        }
                    }
                }

                .right {
                    margin-top: 5px;
                    flex: 1;
                    overflow: hidden;

                    .con {
                        font-size: 10px;
                        line-height: 16px;
                    }

                    .pic-list {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        overflow-x: auto;
                        margin-top: 20px;

                        img {
                            width: 120px;
                        }
                    }
                }
            }
        }

        .item {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 5px;
            padding: 10px 0;
            border-bottom: solid 1px #595959;

            .right {
                flex: 1;
                overflow: hidden;

                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    white-space: nowrap;

                    &>div {
                        display: flex;
                        align-items: center;
                    }

                    &>div:first-child {
                        gap: 5px;
                    }

                    img {
                        width: 22px;
                    }

                    .tag {
                        font-size: 8px;
                        color: #a4a4a4;
                    }

                    .praise {
                        background: #eb49a8;
                        border-radius: 99px;
                        line-height: 1em;
                        font-size: 8px;
                        padding: 5px 6px;

                        img {
                            width: 9px;
                        }
                    }
                }

                .con {
                    font-size: 12px;
                    line-height: 16px;

                    &>div:first-child {
                        color: #8b8b8b;
                        margin: 10px 0;
                    }
                }

                .pic-list {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    overflow-x: auto;
                    margin-top: 20px;

                    img {
                        width: 120px;
                    }
                }
            }
        }
    }

    .read-more {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        gap: 5px;
        margin: 0px 20px 0 20px;
        padding: 5px 0;
        font-size: 13px;

        .triangle {
            width: 0;
            height: 0;
            border-top: 8px solid #339ede;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
    }
}
</style>
